<template>
  <div class="vc-news-list-wrapper">
    <div class="vc-news-list-header"></div>
    <div class="vc-news-list-body">
      <div
        v-if="!loading"
        ref="newsListRef"
        class="vc-news-list fit-box full-height"
        :style="visual.parseStyle(compStyle)"
      >
        <el-table
          ref="dataTable"
          v-bind="tableOptions"
          :data="dataList"
          class="vc-news-list-table fit-table"
        >
          <el-table-column
            v-for="column in columnList"
            :key="column.prop"
            v-bind="column.options"
          >
            <template #default="{ row }">
              <div v-if="column.fieldType === '日期'" :style="column.style">
                {{row[column.prop] ? date.formatLongDate(row[column.prop], column.format) : ''}}
              </div>
              <div v-else-if="column.fieldType === '数字'" :style="column.style">
                {{tool.formatNumber(row[column.prop], column.point)}}
              </div>
              <div v-else :style="column.style">{{row[column.prop]}}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue';
import visual from "@/visual/js/visual";
import date from "@/utils/date";
import tool from "@/utils/tool";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const dataList = ref([{}]);
const loading = ref(true);
const tableOptions = ref({});
const columnList = ref([]);

const init = async() => {
  loading.value = true;
  if (currNode.value.compData.dataSourceType === '') {
    currNode.value.compData.dataSourceType = '静态数据';
  }
  dataList.value = (await visual.loadData(props.compData, {}, {}) || {}).data || [];
  initTableOptions();
  initColumnList();
  await nextTick(() => loading.value = false);
};

const initTableOptions = () => {
  const compStyle = props.compStyle || {};
  const options = {};
  options.width = compStyle['width'] || '100%';
  options.height = compStyle['height'] || '100%';
  options.border = compStyle['border'] || false;
  options.stripe = compStyle['stripe'] || false;
  tableOptions.value = options;
};

const initColumnList = () => {
  const compStyle = props.compStyle || {};
  const list = [];
  (compStyle.columnList || []).forEach(item => {
    const column = {};

    column.prop = item.prop;
    column.fieldType = item.fieldType;
    column.point = item.point;
    column.format = item.format;

    const options = {};
    if (item.autoWidth) {
      options.minWidth = item.width || 10;
    } else {
      options.width = item.width || 10;
    }
    options.label = item.label;
    options.headerAlign = item.headerAlign;
    options.align = item.align;
    column.options = options;

    column.style = visual.parseFontStyle(item);
    list.push(column);
  });
  columnList.value = list;
};

watch(() => props.node, (val) => {
  currNode.value = val;
}, {immediate: true});

watch(() => props.compData, () => {
  init();
}, { deep: true, immediate: true });

watch(() => props.compStyle, () => {
  init();
}, { deep: true, immediate: true });
</script>

<style scoped lang="scss">
.vc-news-list-wrapper {
  display: flex;
  flex-direction: column;
  height: 1px;
  flex-grow: 1;
  .vc-news-list-body {
    height: 1px;
    flex-grow: 1;
    .vc-news-list {
      display: flex;
      flex-direction: row;
    }
  }
}
.vc-news-list-table {
  --el-table-index: unset;
  :deep(.el-table__inner-wrapper):before {
    background-color: unset!important;
  }
}
</style>